<!-- wyf 2022-1-25 -->
<template>
  <a-pagination
    v-model:current="current1"
    v-model:page-size="pageSize1"
    class="pagination-item"
    :show-quick-jumper="showQuickJumper"
    :locale="locale.Pagination"
    :total="total"
    :show-less-items="showLessItems"
    :disabled="disabled"
    :page-size-options="pageSizeOptions"
    :show-total="showTotal"
    :default-page-size="defaultPageSize"
    :hide-on-single-page="hideOnSinglePage"
    :show-size-changer="showSizeChanger"
    :simple="simple"
    :item-render="itemRender"
    :responsive="responsive"
    @showSizeChange="showSizeChange"
  >
    <!-- @change="change" -->
    <template v-if="$slots.itemRender" #itemRender>
      <slot name="itemRender" />
    </template>
    <slot />
  </a-pagination>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { Pagination } from 'ant-design-vue'
export default defineComponent({
  name: 'ZPagination',
  components: {
    APagination: Pagination
  },
  props: {
    current: {
      type: Number,
      default: undefined
    },
    total: {
      type: Number,
      default: 0
    },
    showQuickJumper: {
      type: Boolean,
      default: true
    },
    showLessItems: {
      type: Boolean,
      default: false
    },
    pageSize: {
      type: Number,
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    pageSizeOptions: {
      type: Array,
      default() {
        return ['10', '20', '50', '100']
      }
    },
    showTotal: {
      type: Function,
      default(total) {
        return `共 ${total} 项`
      }
    },
    defaultPageSize: {
      type: Number,
      default: 10
    },
    hideOnSinglePage: {
      type: Boolean,
      default: false
    },
    showSizeChanger: {
      type: Boolean,
      default: true
    },
    simple: {
      type: Boolean,
      default: undefined
    },
    itemRender: {
      type: Function,
      default: undefined
    },
    responsive: {
      type: Boolean,
      default: undefined
    }
  },
  setup(props, _ref) {
    const current1 = computed({
      get() {
        return props.current
      },
      set(val) {
        _ref.emit('update:current', val)
      }
    })
    const pageSize1 = computed({
      get() {
        return props.pageSize
      },
      set(val) {
        _ref.emit('update:pageSize', val)
      }
    })
    return {
      current1,
      pageSize1
    }
  },
  methods: {
    // change(page, pageSize) {
    //   this.$emit('change', page, pageSize)
    // },
    showSizeChange(current, pageSize) {
      this.$emit('showSizeChange', current, pageSize)
    }
  }
})
</script>
